.title {
  width: 100%;
  // container
  .title-container {
    // width: 960px;
    margin: 0 auto;
    ul {
      display: flex;
      li {
        margin-right: 10px;
        // 首页
        .index {
          color: #ea6f5a;
        }
        // 下载App
        .down:hover {
          background: #f5f5f5;
        }
        // input
        form {
          margin-left: 10px;
          position: relative;
          top: 9px;
          .input {
            width: 160px;
            height: 38px;
            padding: 0px 40px 0px 20px;
            border-radius: 40px;
            border: none;
            box-sizing: border-box;
            margin: auto 0;
            background: #eee;
            transition: width 0.5s ease 0s;
          }
          .input:focus {
            width: 240px;
            outline: none;
          }
          .icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
            top: 5px;
            right: 5px;
            color: #969696;
            padding: 0px;
            text-align: center;
            line-height: 25px;
            span {
              font-weight: 200;
            }
          }
          .input:focus + .icon {
            background: #969696;
            span {
              color: white;
            }
          }
        }
        //
        a {
          display: block;
          height: 55px;
          padding: 15px;
          font-size: 17px;
          box-sizing: border-box;
          .icon {
            padding-top: 2px;
            font-size: 20px;
          }
        }
        .input {
          position: relative;
          .search-icon {
            position: absolute;
            padding: 0px;
            height: auto;
          }
        }
      }
    }
  }
  // toggle
  .title-toggle {
    width: 100%;
    height: 100%;
    position: relative;
    .button {
      float: left;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 5px 10px;
      margin-top: 10px;
      cursor: pointer;
      span {
        display: block;
        width: 20px;
        height: 2px;
        margin: 4px 0px;
        background: #888;
      }
    }
    .nav {
      background: white;
      visibility: hidden;
      position: absolute;
      top: 55px;
      width: 100%;
      height: 0px;
      text-align: center;
      font-size: 17px;
      transition: all 0.5s;
      overflow: hidden;
      // index
      .index a span {
        display: block;
        padding: 15px 0px;
        color: #ea6f5a;
      }
      // down
      .down a span {
        display: block;
        padding: 15px 0px;
      }
      // input 
      .search {
        box-sizing: border-box;
        input{
          width: 95%;
          height: 38px;
          padding: 5px 15px;
          margin: 10px 20px;
          border: none;
          border-radius: 20px;
          font-size: 14px;
          box-sizing: border-box;
          background: #eee;
        }
      }
      .down:hover {
        background: rgb(236, 236, 236);
      }
      li:after {
        content: "";
        display: block;
        width: 98%;
        height: 1px;
        background: #f0f0f0;
      }
    }
    .button:hover {
      background: rgb(236, 236, 236);
    }
    #toggle-checkbox {
      display: none;
    }
    #toggle-checkbox:checked ~ .nav {
      visibility: visible;
      height: 200px;
    }
  }
}
